<template>
  <div class="article">
    <b-crumbs />
    <div class="b-article-form">
      <el-row :gutter="10">
        <el-col :span="7">
          <div class="grid-content bg-purple">
            <label for="cate">产品:</label>
            <el-select
              name="cate"
              v-model="cate"
              placeholder="请选择产品"
              :multiple="true"
              size="medium"
              popper-class="b-select"
              clearable
              filterable
            >
              <el-option
                v-for="cateItem in cateOptions"
                :key="cateItem.value"
                :label="cateItem.label"
                :value="cateItem.value"
              ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple">
            <label for="tag">颜色:</label>
            <el-select
              name="tag"
              v-model="tag"
              placeholder="请选择颜色"
              :multiple="true"
              size="medium"
              popper-class="b-select"
              clearable
              filterable
            >
              <el-option
                v-for="tagItem in color"
                :key="tagItem.value"
                :label="tagItem.label"
                :value="tagItem.value"
                seletced
              ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6" class="create-time">
          <label for="createTime">入库时间:</label>
          <el-date-picker
            name="createTime"
            v-model="createTime"
            type="daterange"
            size="medium"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="small">查询</el-button>
          <el-button size="small">重置</el-button>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="10">
        <el-col :span="6" class="update-time">
          <label for="updateTime">更新时间:</label>
          <el-date-picker
            name="updateTime"
            v-model="updateTime"
            type="daterange"
            size="medium"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="8" class="title">
          <label for="title">标题:</label>
          <el-input
            name="title"
            v-model="title"
            placeholder="请输入标题"
          ></el-input>
        </el-col>
      </el-row> -->
      <el-row>
        <!-- <el-col :span="6">
          <el-button type="primary" size="small">查询</el-button>
          <el-button size="small">重置</el-button>
        </el-col> -->
      </el-row>
    </div>
    <div class="b-article-table">
      <!-- <el-table :data="tableData" style="width: 100%" :border="true" :row-class-name="tableRowClassName" stripe> -->
      <el-table :data="tableData" style="width: 100%" :border="true" :row-class-name="tableRowClassName">
        <el-table-column
          align="center"
          type="selection"
          width="50"
        ></el-table-column>
        <!-- <el-table-column align="center" label="产品名称" width="120">
          <template slot-scope="scope">
            <el-tag
              size="medium"
              :effect="scope.row.tagEffect"
              :type="scope.row.tagType"
              >{{ scope.row.cate }}</el-tag
            >
          </template>
        </el-table-column> -->
        <el-table-column
          align="center"
          prop="productName"
          label="产品名称"
        >
        <template slot-scope="scope">
          <el-tag
            size="medium"
            hit
            effect="plain"
            >{{ `${scope.row.productName} - ${color[scope.row.color-1].label}` }}</el-tag
          >
        </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="inventoryWeiht"
          label="库存量(kg)"
          width="330"
        >
          <template slot-scope="scope">
            <span :class="{ 'warning-col': scope.row.inventoryWeiht <= 0 }">{{ `${scope.row.inventoryWeiht}kg` }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="location"
          label="所存仓库"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="singleWeight"
          label="单个重量(g)"
          width="100"
        >
        <template slot-scope="scope">
          {{ `${scope.row.singleWeight}g` }}
        </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="inventoryNumber"
          label="大约总个数"
          width="120"
        >
          <template slot-scope="scope">
            <span :class="{ 'warning-col': scope.row.inventoryNumber <= 0 }">{{ `${scope.row.inventoryNumber}个` }}</span>
            
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="fetchRecord"
          label="本月出仓记录"
          width="120"
        >
          <template slot-scope="scope">
            {{ `${scope.row.fetchRecord}条` }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="depositRecord"
          label="本月入仓记录"
          width="120"
        >
          <template slot-scope="scope">
            {{ `${scope.row.depositRecord}条` }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
        ></el-table-column> -->
        <el-table-column
          align="center"
          prop="updateTime"
          label="最后围数时间"
          width="160"
        >
        <template slot-scope="scope">
          <span :class="{ 'warning-col': toBeUpdate(scope.row.updateTime) }">{{ `${scope.row.updateTime}` }}</span>
        </template>
        </el-table-column>
        <el-table-column align="center" label="管理" width="300">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"  type="warning" plain
              >更新单重</el-button
            >
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary" plain
              >编辑库存</el-button
            >
            <el-button
              size="mini"
              type="danger"  plain
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="b-pagination">
        <el-pagination
          @current-change="jumpPage()"
          :current-page.sync="pagination.curr"
          :page-size="pagination.size"
          layout="total, prev, pager, next"
          :total="pagination.total"
          :hide-on-single-page="true"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import BCrumbs from "@/components/BCrumbs";
export default {
  name: "ArticleList",
  data() {
    return {
      color: [
        { value: "1", label: "灰色" },
        { value: "2", label: "白色" },
        { value: "3", label: "深灰色" },
        { value: "4", label: "H色" },
        { value: "5", label: "银色" },
        { value: "6", label: "深灰" },
        { value: "7", label: "蓝灰" },
        { value: "8", label: "铁灰" },
        { value: "9", label: "黑色" },
        { value: "10", label: "枪色" }
      ],
      cateOptions: [
        { value: "1", label: "01" },
        { value: "2", label: "02" },
        { value: "3", label: "03" },
        { value: "4", label: "04" },
        { value: "5", label: "05" },
        { value: "6", label: "06" },
        { value: "7", label: "07" },
      ],
      tag: [],
      cate: [],
      sort: { field: "sort", mode: "1" },
      createTime: [],
      updateTime: [],
      title: "",
      tableData: [
        {
          id: 1,
          productName: "09",
          color: "5",
          inventoryWeiht: "128",
          location: "3号仓",
          singleWeight: "33.72",
          inventoryNumber: "3210",
          fetchRecord: "21",
          depositRecord: "32",
          createTime: "2021-3-4 11:49:29",
          updateTime: "2021-3-4 11:49:38"
        },
        {
          id: 5,
          productName: "09B",
          color: "5",
          inventoryWeiht: "0",
          location: "3号仓",
          singleWeight: "33.72",
          inventoryNumber: "0",
          fetchRecord: "21",
          depositRecord: "32",
          createTime: "2021-3-4 11:49:29",
          updateTime: "2021-3-4 11:49:38"
        },
        {
          id: 2,
          color: "1",
          productName: "03",
          inventoryWeiht: "228",
          location: "1号仓",
          singleWeight: "18.21",
          inventoryNumber: "4926",
          fetchRecord: "72",
          depositRecord: "62",
          createTime: "2021-3-4 11:49:29",
          updateTime: "2021-3-4 11:49:38"
        },
        {
          id: 3,
          productName: "01",
          inventoryWeiht: "1236",
          color: "2",
          location: "4号仓",
          singleWeight: "7.26",
          inventoryNumber: "124524",
          fetchRecord: "53",
          depositRecord: "12",
          createTime: "2024-6-25 11:49:29",
          updateTime: "2024-6-25 11:49:29"
        },
        {
          id: 4,
          productName: "05磁头无声",
          inventoryWeiht: "128",
          color: "1",
          location: "1号仓",
          singleWeight: "23.72",
          inventoryNumber: "3210",
          fetchRecord: "21",
          depositRecord: "32",
          createTime: "2021-3-4 11:49:29",
          updateTime: "2021-3-4 11:49:38"
        },
      ],
      pagination: { curr: 1, size: 10, total: 1000 }
    };
  },
  methods: {
    changeTag() {
      console.log(this.tag);
    },
    toBeUpdate(strDate){
      let millisecondsUntil = new Date(strDate) - new Date();
      let hoursUntil = Math.floor(millisecondsUntil / 1000 / 60 / 60);
      return hoursUntil <= 24 * -5
    },
    /* eslint-disable */
    tableRowClassName({rowIndex}) {
      if (rowIndex % 2 == 1) {
        return 'odd-row';
      }
      
      if (rowIndex % 2 == 0) {
        return 'even-row';
      }
      return '';
    }
  },
  components: {
    BCrumbs,
  }
};
</script>
<style scoped>
.b-article-form {
  margin-top: 30px;
}
.el-row {
  margin: 18px 0;
}
label {
  margin-right: 8px;
  font-size: 14px;
}
[class*="el-col-"] {
  text-align: left;
}
.b-select {
  width: 100%;
}
.el-select {
  width: 90%;
}
.status .el-select {
  width: 60%;
}
.create-time .el-date-editor,
.update-time .el-date-editor {
  width: 81%;
}
.title .el-input {
  width: 79%;
}

.b-article-table {
  margin-top: 30px;
}
.b-pagination {
  margin-top: 20px;
}
.b-article-table .has-gutter > tr > th {
  border-top: 1px solid #ababab;
  border-bottom: 1px solid #ababab;
  border-right: 1px solid #dfdfdf;
  background: #ececec;
  color: #333;
}

:deep.b-article-table tr.warning-row {
  background: oldlace;
}

:deep.b-article-table tr.success-row {
  background: #f0f9eb;
}

:deep.b-article-table tr.odd-row {
  background: #f5f5f5;
}

:deep.b-article-table tr.even-row {
  /* background: #fde7cf; */
}

:deep.b-article-table .warning-col{
  color: #f00;
  font-weight: bold;
}

:deep.el-table .el-table__row:hover > td.el-table__cell {
  background-color: #e4e4e4; /* 你想设置的高亮颜色 */
}
</style>
